<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 18:38:29
 * @LastEditTime: 2019-08-31 08:26:36
 * @LastEditors: Please set LastEditors
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 350px;
			height: 350px;
			border: 1px solid #000;
			margin: 200px;
			position: absolute;
		}
		#big{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			overflow: hidden;
			position: absolute;
			top:0;
			left : 360px;
			/* display: none; */
		}
		#mask{
			width: 175px;
			height: 175px;
			background: paleturquoise;
			position: absolute;
			left:0px;
			top: 0px;
			opacity: 0.3;
			display: none;
			cursor: move;
		}
		#small{
			position: relative;
		}
		#bigImg{
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
	<body>
		<div id="box" >
			<div id="small"><!--小图区-->
				<img src="001.jpg" alt="" />
				<div id="mask"></div><!--遮罩层-->
			</div>
			<div id="big"><!--大图区-->
				<img src="0001.jpg" alt="" id="bigImg"/>
			</div>
		</div>
	</body>
</html>
<script src="public.js"> </script>
<script type="text/javascript">
	// bigImgLeft / x = (大图的宽度-大图可视区宽度)/(小图宽度-mask的宽度) = 大图宽度/小图宽度 = 大图可视区宽度 / 小图可视区（mask）宽度
	
	var box = $id("box");
	var small = $id("small");
	var mask = $id("mask");
	var big = $id("big");
	var bigImg = $id("bigImg");
	
	box.onmouseover = function(){
		mask.style.display = "block";
		big.style.display = "block";
	}
	box.onmouseout = function(){
		mask.style.display = "none";
		big.style.display = "none";
	}
	box.onmousemove = function(eve){
		var e = eve || event;
		var l = e.pageX-box.offsetLeft-mask.offsetWidth/2;
		var t = e.pageY-box.offsetTop-mask.offsetHeight/2;
		var maxL = box.clientWidth - mask.offsetWidth;
		var maxT = box.clientHeight - mask.offsetHeight;
		l = l < 0 ? 0 : (l > maxL ? maxL : l);
		t = t < 0 ? 0 : (t > maxT ? maxT : t);
		mask.style.left = l + "px";
		mask.style.top = t + "px";
		var bigImgLeft = l * (bigImg.clientWidth - big.clientWidth)/(small.clientWidth - mask.offsetWidth);
		var bigImgTop = t * (bigImg.clientHeight - big.clientHeight)/(small.clientHeight - mask.clientHeight);
		//var bigImgLeft = l * (bigImg.clientWidth/small.clientWidth);
		//var bigImgTop = t * (bigImg.clientHeight/small.clientHeight);
		bigImg.style.left = - bigImgLeft + "px";
		bigImg.style.top = - bigImgTop + "px";
	}
</script>
